<!--
 * @Author: your name
 * @Date: 2021-07-15 10:32:08
 * @LastEditTime: 2021-07-30 16:05:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \usp-osm-frondend\src\views\productCenter\catalog\update\dialogTable.vue
-->
<template>
  <el-dialog
    title="添加属性"
    append-to-body
    :visible.sync="dialogTableVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    destroy-on-close
    top="0"
    width="90%"
    center
  >
    <v-notes>
      <el-form label-width="160px" :model="searchModel" ref="searchForm" class="search-form" size="small">
        <el-row class="search-row">
          <el-col :span="24">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="属性名称" prop="attributeName">
                  <el-input
                    placeholder="请输入"
                    v-model="searchModel.attributeName"
                    clearable
                    @keyup.enter.native.prevent="searchAttribute"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="属性类型" prop="type">
                  <el-select v-model="searchModel.type" placeholder="请选择" popper-class="select-class" :popper-append-to-body="false">
                    <el-option key label="全部" value></el-option>
                    <el-option
                      v-for="item in attributetypes"
                      :key="item.dicCode"
                      :label="item.dicName"
                      :value="item.dicCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否必须" prop="required">
                  <el-select v-model="searchModel.required" placeholder="Please Select" popper-class="select-class" :popper-append-to-body="false">
                    <el-option key label="全部" value></el-option>
                    <el-option
                      v-for="item in requiredList"
                      :key="item.id"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="search-row">
          <el-col :span="8" :offset="16" style="text-align:right;">
            <el-button
              @click="resetForm('searchForm')"
              icon="el-icon-refresh-left"
              class="white-btn"
            >重置</el-button>
            <el-button
              @click="searchAttribute"
              icon="el-icon-search"
              class="dark-btn search-btn"
            >搜索</el-button>
          </el-col>
        </el-row>
        <!-- Filter start -->
      </el-form>
    </v-notes>
    <div class="mb-lg">
      <v-table
        :data="tableData"
        ref="multipleTable"
        :listLoading="listLoading"
        :loadingText="loadingText"
        :paginationTotal="total"
        v-on:pageSizeChange="pageSizeChange"
        v-on:currentPageChange="currentPageChange"
        v-on:handleSelectionChange="handleSelection"
        border
        pagination
      >
        <el-table-column
            type="selection"
            width="50"
            align="center"
            size="mini"
            label-class-name="table-selection"
        >
        </el-table-column>
        <el-table-column type="index" label="NO." align="center"></el-table-column>
        <el-table-column
         label="属性名称"
         align="center"
         min-width="120"
         prop="attributeName"
         :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
         label="是否必须"
         align="center"
         prop="required"
         min-width="80">
          <template slot-scope="scope">
           <span>{{ scope.row.required == '0' ? '否' : '是' }}</span>
         </template>
        </el-table-column>
        <el-table-column label="属性类型" align="center" min-width="110" :show-overflow-tooltip="true">
          <template slot-scope="scope">{{ getDictionaryNameByCode('SPUATTRIBUTE', scope.row.attributeType) }}</template>
        </el-table-column>
        <el-table-column label="后台类目数" min-width="110" align="center">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top" v-if="scope.row.responseCatalogNameVoList" popperClass="table-popper">
              <span v-for="(item,index) in scope.row.responseCatalogNameVoList" :key="index">
                {{item.catalogName}}
                <span v-if="index!=scope.row.responseCatalogNameVoList.length-1">/<br></span>
              </span>
              <div slot="reference" class="name-wrapper green">{{scope.row.catalogCount}}</div>
            </el-popover>
            <span v-else>{{ scope.row.catalogCount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" align="center" min-width="130px" :show-overflow-tooltip="true">
          <template slot-scope="scope">{{
              scope.row.updateTime | timestampToChange('time')
            }}</template>
        </el-table-column>
      </v-table>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button class="search-btn" @click="onSave">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import VNotes from '@/components/Notes/index'
import VTable from '@/components/PageTable/index'
import { getAttribute } from '@/api/attribute'
import { mapGetters } from 'vuex'
import { common } from '@/mixins/common'
export default {
  name: 'attributeDialog',
  components: {
    VTable,
    VNotes
  },
  mixins: [common],
  data () {
    return {
      searchModel: {
        displayStart: 0, // 开始查询条数
        displayLength: 10, // 每页展示条数
        attributeName: '', // 属性名称
        type: '',
        required: '',
        filteredAttributeIdList: []
      },
      tableData: [],
      listLoading: false,
      loadingText: '加载中...',
      total: 0,
      pageSize: 10,
      currentPage: 1,
      requiredList: [
        {
          id: 1,
          value: '1',
          label: 'YES'
        },
        {
          id: 2,
          value: '0',
          label: 'NO'
        }
      ],
      attributetypes: [],
      selectData: [],
      dialogTableVisible: false
    }
  },
  mounted () {
    this.attributetypes = this.lookupItems.SPUATTRIBUTE
  },
  computed: {
    ...mapGetters(['lookupItems'])
  },
  methods: {
    open (idList) {
      this.dialogTableVisible = true
      this.searchModel.filteredAttributeIdList = idList
      this.fetchList()
    },
    close () { // 关闭取消选择
      if (this.selectData.length > 0) {
        this.$confirm('确定离开此页面？如果离开，更改将丢失', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.selectData = []
          this.dialogTableVisible = false
        }).catch(() => {})
      } else {
        this.dialogTableVisible = false
      }
    },
    onSave () { // 保存选择
      this.dialogTableVisible = false
      this.selectData.forEach(item => {
        this.$parent.datas.attrList.push(item)
      })
    },
    // 选中项
    handleSelection (val) {
      this.selectData = val
    },
    searchAttribute () {
      this.searchModel.displayStart = 0
      this.$refs.multipleTable.restPage()
      this.fetchList()
    },
    fetchList () {
      // attribute列表查询
      const self = this
      this.listLoading = true
      getAttribute(self.searchModel).then((response) => {
        self.listLoading = false
        // 调用查询接口
        const data = response
        if (data) {
          const obj = data.obj
          this.tableData = obj.data || []
          self.total = obj.total
        } else if (Number(data.code) === 0) {
          this.$confirm(data.msg, {
            confirmButtonText: 'OK',
            showCancelButton: false
          })
        } else {
          this.$confirm(this.$t(data.code), {
            confirmButtonText: 'OK',
            showCancelButton: false
          })
        }
      })
    },
    pageSizeChange (size) {
      this.searchModel.displayLength = size
      this.fetchList()
    },
    currentPageChange (curPage) {
      this.searchModel.displayStart = curPage - 1
      this.fetchList()
    },
    resetForm (formName) {
      /* this.isFilter = false */
      this.searchModel.type = ''
      this.searchModel.required = ''
      this.searchModel.attributeName = ''
      this.searchAttribute()
    }
  }
}
</script>
<style scoped>
</style>
